<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<style type="text/css">
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
body{
	background-color:#F00;
}
</style>
</head>

<body>
<div id="sidebar">asdfasfasdf</div>
<script>

//定义一个 实体对像(类) 并定义方法 promptColor
var Sidebar = Backbone.Model.extend({
  promptColor: function() { //输入cssColor,并设置到属性
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

//实例化 Sidebar实体(类)
window.sidebar = new Sidebar({color:"#0F0"});

//绑定事件,当 属性 color 变化时,设置到#sidebar 上
sidebar.bind('change:color', function(model, color) {
  $('#sidebar').css({background: color});
  console.log(model);
});

sidebar.set({color: 'white',f:"nihao"});

//执行自定义方法
sidebar.promptColor();
console.log(sidebar);
</script>
</body>
</html>
